<!doctype html>
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js lt-ie10" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tiny slider</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="css/prism.css">
  <link rel="stylesheet" href="../dist/tiny-slider.css">
  <link rel="stylesheet" href="css/styles.css">
  <!--[if (IE 8)&!(IEMobile)]><script src="../dist/tiny-slider.helper.ie8.js"></script><![endif]-->
</head>
<body>
{% set sliders = [
  'base',
  'start-index',
  'non-loop',
  'rewind',
  'center',
  'fixedWidth',
  'fixedWidth-edgePadding',
  'autoWidth',
  'autoWidth-non-loop',
  'autoWidth-lazyload',
  'vertical',
  'responsive',
  'mouse-drag',
  'mouse-drag2',
  'gutter',
  'edgePadding',
  'arrowKeys',
  'autoplay',
  'animation1',
  'lazyload',
  'customize',
  'autoHeight',
  'nested'
] %}
{# {% set sliders = ['autoWidth-non-loop'] %} #}

{% set titles = [
  "Lorem ipsum dolor sit amet, consectetur adipisicing.",
  "Sunt dignissimos distinctio, veniam, tenetur aspernatur nulla!",
  "Corrupti, libero minima nihil expedita officiis? Quo.",
  "Alias rem, ab impedit recusandae repellat tempore.", "
  Nisi inventore quo delectus perspiciatis voluptatibus, quae.",
  "Nisi harum earum consectetur laudantium iusto, laboriosam.",
  "Dolores blanditiis neque, quis vitae? Reprehenderit, aliquam.",
  "Omnis dolorum eum blanditiis, ratione voluptates quod.",
  "Animi quis iste ex ullam, similique laboriosam.", "D
  eserunt, ipsam! Placeat ullam, nam incidunt odit!"
] %}

{% set collectionId = ["", "", "", "", "", "", "", "", "", "", "", ""
  ] if mobile else ["993239", "1673600", "1513994", "502925", "1891993", "1103088", "548245", "539469", "end"] %}

{% set imgPlaceholder = '' %}
{% set baseurl = 'https://via.placeholder.com' if mobile else 'https://source.unsplash.com/collection/' %}

<div class="nav">
  <div class="nav-toggle-handle">menu</div>
  <ul>
    {% for slide in sliders %}
      <li><a href="#{{ slide }}_wrapper">{{ slide }}</a></li>
    {% endfor %}
  </ul>
</div>

{# sliders #}
<div class="slider-container">
  {% for slide in sliders %}
  <div id="{{ slide }}_wrapper">
    <h2>{{ slide | title }}</h2>

    {# go to #}
    {% if slide === 'base' %}
      <div class="goto-controls">
        Go to slide: <input type="text" value="3">
        <button class="button">Go</button>
      </div>
    {% endif %}

    {# slider body #}
    <div class="{{ slide }}" id="{{ slide }}">
      {# lazy load #}
      {% if slide === 'lazyload' %}
        {% for i in range(1, 6) %}
          <div>
            <div><img class="tns-lazy-img" src="{{ imgPlaceholder }}" data-src="{{ baseurl }}{{ collectionId[i - 1] }}/600x600" alt="" width="600" height="600"></div>
            <p>{{ titles[i] }}</p>
          </div>
        {% endfor %}

      {# customize #}
      {% elif slide === 'customize' %}
        {% for i in range(1, 6) %}
          <div>
            <div><img src="{{ baseurl }}{{ collectionId[i - 1] }}/600x400" alt="" width="600" height="400"></div>
            <p>{{ titles[i] }}</p>
          </div>
        {% endfor %}

      {# auto height #}
      {% elif slide === 'autoHeight' or slide === 'responsive5' %}
        {% set w = 700 if mobile else 1600 %}
        {% set hs = [500, 700, 600, 800, 500, 600, 800] %}
        {% if slide === 'autoHeight' %}
          {% for i in range(1, 6) %}
            <div>
              <div><img src="{{ baseurl }}{{ collectionId[i - 1] }}/{{ w }}x{{ hs[i-1] }}" alt="" width="{{ w }}" height="{{ hs[i-1] }}"></div>
              <p>{{ titles[i] }}</p>
            </div>
          {% endfor %}
        {% else %}
          {% for i in range(1, 6) %}
            <div class="item">
              <div class="img img-{{ i }}" style="height: {{ hs[i-1] }}px;"><a href="">{{ i - 1 }}</a></div>
            </div>
          {% endfor %}
        {% endif %}

      {# nested #}
      {% elif slide === 'nested' %}
        {% for i in range(1, 8) %}
        <div class="item">
          {% if i === 1 %}
            <div class="{{ slide }}_inner_wrapper" id="{{ slide }}_inner_wrapper">
              <div class="{{ slide }}_inner" id="{{ slide }}_inner">
                {% for i in range(1, 8) %}
                <div class="item">
                  <div class="img img-{{ i }}"><a href="">{{ i - 1 }}</a></div>
                  <p>{{ titles[i] }}</p>
                </div>
                {% endfor %}
              </div>
            </div>
          {% else %}
            <div class="img img-{{ i }}"><a href="">{{ i - 1 }}</a></div>
            <p>{{ titles[i] }}</p>
          {% endif %}
        </div>
        {% endfor %}

      {# responsive6 #}
      {% elif slide === 'responsive6' %}
        {% for i in range(1, 3) %}
        <div class="item">
          <div class="img img-{{ i }}"><a href="">{{ i - 1 }}</a></div>
          <p>{{ titles[i] }}</p>
        </div>
        {% endfor %}

      {% elif slide.indexOf('mouse-drag') >= 0 %}
        {% for i in range(1, 8) %}
        <div class="item">
          {% if slide === 'mouse-drag' %}
            <div><a href=""><img src="{{ baseurl }}{{ collectionId[i - 1] }}/600x400" width="600" height="400" alt=""></a></div>
          {% else %}
            <div class="img img-{{ i }}"><a href="">{{ i - 1 }}</a></div>
          {% endif %}
          <p>{{ titles[i] }}</p>
        </div>
        {% endfor %}

      {% elif slide.indexOf('autoWidth') >= 0 %}
        {% set sizes = [[600, 320], [500, 300], [200, 310], [400, 330], [640, 300], [360, 240], [460, 280]] %}
        {% for i in range(1, 8) %}
        <div class="item">
          {% set lazyload = slide.indexOf('lazyload') >= 0 %}
          {% set width = sizes[i - 1][0] %}
          {% set height = sizes[i - 1][1] %}
          {% set lk = baseurl + collectionId[i - 1] + '/' + width + 'x' + height %}
          <img {{ "class=tns-lazy-img" if lazyload }} src="{{ imgPlaceholder if lazyload else lk }}" {{ "data-src=" + lk if lazyload }} width="{{ width }}" height="{{ height }}" alt="">
        </div>
        {% endfor %}

      {# default #}
      {% else %}
        {% set regExp = r/^vertical/%}
        {% for i in range(1, 8) %}
        <div class="item">
          <div class="img img-{{ i }}"><a href="">{{ i - 1 }}</a></div>

          {% if not regExp.test(slide) %}
          <p>{{ titles[i] }}</p>
          {% endif %}
        </div>
        {% endfor %}
      {% endif %}
    </div>

    {# customize tools #}
    {% if slide === 'customize' %}
      <div class="customize-tools">
        <ul class="thumbnails" id="customize-thumbnails">
          {% for i in range(1, 6) %}
            <li><img src="{{ baseurl }}{{ collectionId[i - 1] }}/600x400" alt="" width="600" height="400"></li>
          {% endfor %}
        </ul>
        <ul class="controls" id="customize-controls">
          <li class="prev"><img src="images/angle-left.png" alt=""></li>
          <li class="next"><img src="images/angle-right.png" alt=""></li>
        </ul>
        <div class="playbutton-wrapper"><button id="customize-toggle">Pause</button></div>
      </div>
    {% endif %}
  </div>
  {% endfor %}
</div>

<script src="js/prism.js"></script>
<script>
  var doc = document,
      slideList = doc.querySelectorAll('.slider-container > div'),
      pageNavContainer = doc.querySelector('.nav'),
      pageNav = doc.querySelector('.nav ul'),
      toggleHandle = doc.querySelector('.nav-toggle-handle'),
      divider = window.innerHeight / 2,
      scrollTimer,
      resizeTimer;

  toggleHandle.onclick = function () {
    var classN = pageNavContainer.className;
    pageNavContainer.className = (classN.indexOf(' active') > 0) ? classN.replace(' active', '') : classN + ' active';
  };

  if (window.addEventListener) {
    window.addEventListener('scroll', function () {
      clearTimeout(scrollTimer);

      scrollTimer = setTimeout(function () {
        [].forEach.call(slideList, function (el) {
          var rect = el.getBoundingClientRect(),
              navLink = pageNav.querySelector('[href="#' + el.id + '"]');
          if (rect.top <= divider && rect.bottom > divider) {
            if (navLink.className !== 'active') { navLink.className = 'active'; }
          } else {
            if (navLink.className !== '') { navLink.className = ''; }
          }
        });
      }, 100);
    });

    window.addEventListener('resize', function () {
      clearTimeout(resizeTimer);

      resizeTimer = setTimeout(function () {
        divider = window.innerHeight / 2;
      }, 100);
    });

    pageNav.addEventListener('click', function () {
      var classN = pageNavContainer.className;
      if (classN.indexOf(' active') > 0) { pageNavContainer.className = classN.replace(' active', ''); }
    });
  }

  var mobile = 'false',
      isTestPage = false,
      isDemoPage = true,
      classIn = 'jello',
      classOut = 'rollOut',
      speed = 400,
      doc = document,
      win = window,
      ww = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth,
      fw = getFW(ww),
      initFns = {},
      sliders = new Object(),
      edgepadding = 50,
      gutter = 10;

  function getFW (width) {
    var sm = 400, md = 900, lg = 1400;
    return width < sm ? 150 : width >= sm && width < md ? 200 : width >= md && width < lg ? 300 : 400;
  }
  window.addEventListener('resize', function() { fw = getFW(ww); });
</script>

<script src="../dist/min/tiny-slider.js"></script>
<script>
// <script type="module">
  // import { tns } from '../src/tiny-slider.js';

  var options = {
    'base': {
      container: '',
      items: 3,
      // loop: false,
      slideBy: 'page',
      mouseDrag: true,
    },
    'start-index': {
      container: '',
      items: 3,
      slideBy: 'page',
      loop: false,
      startIndex: 6,
    },
    'few-items': {
      container: '',
      items: 9,
      edgePadding: edgepadding,
      slideBy: 'page',
      mouseDrag: true,
      arrowKeys: true,
      autoplay: true,
      loop: false,
    },
    'mouse-drag': {
      container: '',
      items: 3,
      mouseDrag: true,
      slideBy: 'page',
    },
    'mouse-drag2': {
      container: '',
      items: 3,
      mouseDrag: true,
      slideBy: 'page',
    },
    'gutter': {
      container: '',
      items: 3,
      gutter: gutter,
    },
    'edgePadding': {
      container: '',
      items: 3,
      edgePadding: edgepadding,
    },
    'edgePadding-gutter': {
      container: '',
      items: 3,
      gutter: gutter,
      edgePadding: edgepadding,
    },
    'non-loop': {
      container: '',
      // items: 3,
      loop: false,
      responsive: {
        350: {
          items: 2
        },
        500: {
          items: 3
        }
      },
    },
    'rewind': {
      container: '',
      items: 3,
      rewind: true,
    },
    'center': {
      container: '',
      items: 2,
      center: true,
      loop: false,
    },
    'slide-by-page': {
      container: '',
      items: 3,
      slideBy: 'page',
    },
    'fixedWidth': {
      container: '',
      fixedWidth: fw,
    },
    'fixedWidth-gutter': {
      container: '',
      gutter: gutter,
      fixedWidth: fw,
    },
    'fixedWidth-edgePadding': {
      container: '',
      edgePadding: edgepadding,
      fixedWidth: fw,
    },
    'fixedWidth-edgePadding-gutter': {
      container: '',
      gutter: gutter,
      edgePadding: edgepadding,
      fixedWidth: fw,
      slideBy: 2,
      loop: false,
      arrowKeys: true,
    },
    'autoWidth': {
      autoWidth: true,
      items: 3.3,
      // slideBy: 2.6,
      gutter: 10,
      mouseDrag: true,
      swipeAngle: false,
    },
    'autoWidth-non-loop': {
      autoWidth: true,
      loop: false,
      mouseDrag: true,
    },
    'autoWidth-lazyload': {
      autoWidth: true,
      items: 3.3,
      slideBy: 2.6,
      gutter: 10,
      mouseDrag: true,
      lazyload: true,
    },
    'responsive': {
      items: 2,
      controls: false,
      responsive: {
        350: {
          items: 3,
          controls: true,
          edgePadding: 30,
        },
        500: {
          items: 4
        }
      },
    },
    'responsive1': {
      container: '',
      gutter: 10,
      slideBy: 1,
      responsive: {
        350: {
          items: 2,
          edgePadding: 20,
        },
        500: {
          items: 3,
          gutter: 0,
          edgePadding: 40,
          slideBy: 'page',
        }
      },
    },
    'responsive2': {
      items: 3,
      autoplayTimeout: 350,
      responsive: {
        350: {
          controls: false,
          autoplay: true,
          autoplayTimeout: 1000,
          autoplayHoverPause: true,
        },
        500: {
          nav: false,
          controls: true,
          autoplay: false,
        }
      },
    },
    'responsive3': {
      items: 3,
      autoplay: true,
      responsive: {
        350: {
          controlsText: ['&lt;', '&gt;'],
          autoplayText: ['&gt;', '||'],
        },
        500: {
          controlsText: ['prev', 'next'],
          autoplayText: ['start', 'stop'],
        }
      },
    },
    'responsive4': {
      items: 3,
      responsive: {
        350: {
          touch: false,
          mouseDrag: false,
          arrowKeys: false,
        },
        500: {
          touch: true,
          mouseDrag: true,
          arrowKeys: true,
        }
      },
    },
    'responsive5': {
      fixedWidth: fw,
      autoHeight: false,
      responsive: {
        350: {
          autoHeight: true,
          fixedWidth: fw + 100,
        }
      },
    },
    'responsive6': {
      fixedWidth: fw,
      edgePadding: edgepadding,
      gutter: gutter,
      loop: false,
    },
    'arrowKeys': {
      container: '',
      items: 3,
      arrowKeys: true,
    },
    'autoplay': {
      container: '',
      items: 3,
      speed: 300,
      autoplay: true,
      autoplayHoverPause: true,
      autoplayTimeout: 3500,
      autoplayText: ['▶', '❚❚'],
      // autoplayButtonOutput: false,
    },
    'vertical': {
      container: '',
      items: 3,
      axis: 'vertical',
    },
    'vertical-gutter': {
      container: '',
      items: 3,
      axis: 'vertical',
      gutter: gutter,
    },
    'vertical-edgePadding': {
      container: '',
      items: 3,
      axis: 'vertical',
      edgePadding: edgepadding,
    },
    'vertical-edgePadding-gutter': {
      container: '',
      items: 3,
      axis: 'vertical',
      gutter: gutter,
      edgePadding: edgepadding,
    },
    'animation1': {
      container: '',
      mode: 'gallery',
      items: 2,
      animateIn: classIn,
      animateOut: classOut,
      speed: 1000,
    },
    'animation2': {
      container: '',
      mode: 'gallery',
      items: 2,
      speed: 0,
    },
    'lazyload': {
      container: '',
      items: 3,
      edgePadding: 40,
      lazyload: true,
    },
    'customize': {
      container: '',
      items: 3,
      controlsContainer: '#customize-controls',
      navContainer: '#customize-thumbnails',
      navAsThumbnails: true,
      autoplay: true,
      autoplayTimeout: 1000,
      autoplayButton: '#customize-toggle',
    },
    'autoHeight': {
      container: '',
      autoHeight: true,
      items: 1,
    },
    'nested_inner': {
      container: '',
      items: 3,
      nested: 'inner',
      edgePadding: 20,
      loop: false,
      slideBy: 'page',
    },
    'nested': {
      container: '',
      items: 1,
      loop: false,
      // autoHeight: true,
      nested: 'outer',
    }
  };

  for (var i in options) {
    var item = options[i];
    item.container = '#' + i;
    item.swipeAngle = false;
    if (!item.speed) { item.speed = speed; }

    if (doc.querySelector(item.container)) {
      sliders[i] = tns(options[i]);

      // call test functions
      if (isTestPage && initFns[i]) { initFns[i](); }

      // insert code
      if (isDemoPage) {
        doc.querySelector('#' + i + '_wrapper').insertAdjacentHTML('beforeend', '<pre><code class="language-javascript">' + JSON.stringify(item, function (key, value) {
          if (typeof value === 'object') {
            if (value.id) {
              return "document.querySelector('#" + value.id + "')";
            }
          }
          return value;
        }, '  ') + '</code></pre>');
      }

    // test responsive pages
    } else if (i.indexOf('responsive') >= 0) {
      if (isTestPage && initFns[i]) { initFns[i](); }
    }
  }

  // goto
  if (doc.querySelector('#base_wrapper')) {
    var goto = doc.querySelector('#base_wrapper .goto-controls'),
        gotoBtn = goto.querySelector('.button'),
        gotoInput = goto.querySelector('input');

    gotoBtn.onclick = function (event) {
      var index = gotoInput.value;
      sliders['base'].goTo(index);
    };
  }
</script>
</body>
</html>